{{define "demo01/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/s/js/jquery-3.7.1.min.js"></script>
</head>
<body>

    表单提交后后台进行获取参数
    <form action="/getUserInfo" method="post">
        <input type="text" name="username" id = "uname"><br>
        <span id ="errmsg"></span>
        <input type = "password" name="pwd" id = pwd><br>
        <input type="submit" value="提交">
    </form>

    <script>
        //获取用户名的文本框
        unametext = document.getElementById("uname")

        //给文本框绑定一个事件：失去焦点的时候会触发后面的函数的事件
        unametext.onblur =function(){
            uname = unametext.value;
            //alert(uname)可以弹出数据，验证代码的正确性
            // 局部刷新：通过ajax技术来实现数据的校验 ---》 后台 ：异步访问，局部刷新
            // 调用ajax方法需要传入json格式的数据： $.ajax({属性名:属性值,属性名:属性值,方法名:方法})
            $.ajax(
                {
                    url : "/ajaxpost",      //请求路由
                    type : "POST",          //请求类型 GET、POST
                    data : {                //向后端发送的数据，以json格式向后传递
                         "uname" : uname
                    },

                    success : function (info){    //后台响应成功会调用函数,info-后台响应的数据封装到info中，
                        document.getElementById("errmsg").innerText = info["msg"]
                    },
                    fail :function (){      //响应失败后处理逻辑

                    }
                }
            )
        }
    </script>
</body>
</html>
{{end}}